<template>
    <el-menu unique-opened router :default-active=onRoutes() class='el-menu-vertical-demo aside-main' @open='handleOpen' @close='handleClose' :collapse='isCollapse'>
      <el-menu-item index='' class='tigger-btn text-center' @click='tiggerLeft'>
        <i class='el-icon-arrow-left' v-if='isCollapse==false'></i>
        <i class='el-icon-arrow-right' v-else></i>
      </el-menu-item>
      <el-menu-item :index='survey.url' class='el-menu-top' v-if='hasSurvey'>
        <i class='iconfont icon-home'></i>
        <span slot='title'>概况看板</span>
      </el-menu-item>
      <el-menu-item index='/home/welcome' class='el-menu-top' v-else>
        <i class='iconfont icon-home'></i>
        <span slot='title'>首页</span>
      </el-menu-item>
      <template v-for='item in menu'>
        <el-submenu :index='item.name' :key='item.name'>
          <template slot='title'>
            <i class='iconfont' :class='item.icon'></i>
            <span slot='title'>{{item.name}}</span>
          </template>
          <el-menu-item-group >
            <template v-for='child in item.children'>
              <el-menu-item :index='child.url'>{{child.name}}</el-menu-item>
            </template>
          </el-menu-item-group>
        </el-submenu>
      </template>

    </el-menu>
</template>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
}
.el-menu-vertical-demo{
    margin-top: 20px;
  }
</style>

<script>
import {
  memberMenus
  // memberPermissions,
  // memberResources
} from '@/api/operator';
export default {
  data () {
    return {
      isCollapse: false,
      menu: [],
      hasSurvey: false,
      survey: {}
    };
  },
  methods: {
    onRoutes () {
      var path = this.$route.path;
      return path;
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath);
    },
    tiggerLeft () {
      if (this.isCollapse == true) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    }
  },
  created: function () {
    var _this = this;
   // var userId = localStorage.getItem('userId');
    memberMenus().then(response => {
      if (response.code == 0) {
        var data = response.data;
        if (data && data.length > 0) {
          data.forEach(function (d) {
            if (d.priority == 0) {
              _this.hasSurvey = true;
              _this.survey = d;
            } else {
              _this.menu.push(d);
            }
          });
        }
      } else {
        this.$message({
          message: response.message,
          type: 'error'
        });
      }
    });
  }
};
</script>
